<script setup lang="ts" name="LuckyGrid4">
import bg from '@/assets/lottery/luckyGrid/luckyGrid4/bg.png'
import button from '@/assets/lottery/luckyGrid/luckyGrid4/btn.png'
import img0 from '@/assets/lottery/luckyGrid/luckyGrid4/prize0.png'
import img0On from '@/assets/lottery/luckyGrid/luckyGrid4/prize0-on.png'
import img1 from '@/assets/lottery/luckyGrid/luckyGrid4/prize1.png'
import img1On from '@/assets/lottery/luckyGrid/luckyGrid4/prize1-on.png'
import img2 from '@/assets/lottery/luckyGrid/luckyGrid4/prize2.png'
import img2On from '@/assets/lottery/luckyGrid/luckyGrid4/prize2-on.png'
import img3 from '@/assets/lottery/luckyGrid/luckyGrid4/prize3.png'
import img3On from '@/assets/lottery/luckyGrid/luckyGrid4/prize3-on.png'
import img4 from '@/assets/lottery/luckyGrid/luckyGrid4/prize4.png'
import img4On from '@/assets/lottery/luckyGrid/luckyGrid4/prize4-on.png'
import img5 from '@/assets/lottery/luckyGrid/luckyGrid4/prize5.png'
import img5On from '@/assets/lottery/luckyGrid/luckyGrid4/prize5-on.png'
import img6 from '@/assets/lottery/luckyGrid/luckyGrid4/prize6.png'
import img6On from '@/assets/lottery/luckyGrid/luckyGrid4/prize6-on.png'
import img7 from '@/assets/lottery/luckyGrid/luckyGrid4/prize7.png'
import img7On from '@/assets/lottery/luckyGrid/luckyGrid4/prize7-on.png'
import { lottery } from '@/api/lottery'
const luckyGridRef = ref(null)

const initInfo = ref({
  blocks: [
    { padding: '15px', imgs: [
      { src: bg, top: 0, width: '100%', height: '100%' }
    ] }
  ],
  prizes: [
    { x: 0, y: 0, imgs: [{ src: img0, activeSrc: img0On, top: 0, width: '100%', height: '100%' }] },
    { x: 1, y: 0, imgs: [{ src: img1, activeSrc: img1On, top: 0, width: '100%', height: '100%' }] },
    { x: 2, y: 0, imgs: [{ src: img2, activeSrc: img2On, top: 0, width: '100%', height: '100%' }] },
    { x: 2, y: 1, imgs: [{ src: img3, activeSrc: img3On, top: 0, width: '100%', height: '100%' }] },
    { x: 2, y: 2, imgs: [{ src: img4, activeSrc: img4On, top: 0, width: '100%', height: '100%' }] },
    { x: 1, y: 2, imgs: [{ src: img5, activeSrc: img5On, top: 0, width: '100%', height: '100%' }] },
    { x: 0, y: 2, imgs: [{ src: img6, activeSrc: img6On, top: 0, width: '100%', height: '100%' }] },
    { x: 0, y: 1, imgs: [{ src: img7, activeSrc: img7On, top: 0, width: '100%', height: '100%' }] }
  ],
  buttons: [
    { x: 1, y: 1, background: 'rgba(0, 0, 0, 0)', imgs: [{ src: button, top: 0, width: '100%', height: '100%' }] }
  ],
  defaultConfig: {
    gutter: -15
  },
  activeStyle: {
    background: 'rgba(0, 0, 0, 0)'
  }
})

// 点击抽奖按钮会触发star回调
const startCallback = () => {
  // 调用抽奖组件的play方法开始游戏
  luckyGridRef.value.play()
  // 模拟调用接口异步抽奖
  lottery.result({ count: initInfo.value.prizes.length - 1, column: 1 }, { config: { showLoading: false, mockEnable: true } }).then((res: any) => {
    if (res && res.code === 200) {
      // 调用stop停止旋转并传递中奖索引
      luckyGridRef.value.stop(res.data.index)
    }
  })
}

// 抽奖结束会触发end回调
const endCallback = (prize) => {
  console.log(prize, '抽奖结果回调')
}
</script>

<template>
  <el-card shadow="hover">
    <template #header>
      <div class="card-header">
        <span>九宫格-背景图模式</span>
      </div>
    </template>
    <div class="lucky-grid-pane">
      <LuckyGrid ref="luckyGridRef" width="15.625vw" height="15.625vw" rows="3" cols="3" :blocks="initInfo.blocks" :defaultConfig="initInfo.defaultConfig" :activeStyle="initInfo.activeStyle" :prizes="initInfo.prizes" :buttons="initInfo.buttons" @start="startCallback" @end="endCallback"></LuckyGrid>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
.el-card {
  :deep(.el-card__body) {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f4a1f8;
    background-image: url('@/assets/lottery/bg.svg');
    background-attachment: fixed;
  }
}

.lucky-grid-pane {
  width: 18.625vw;
  margin: 0 auto;
  padding: 1.5995vw 1.4vw 2vw;
  overflow: hidden;
}
</style>
